<template>
  <div>
  <Header></Header>
<div>

  <Row class="container">
    <i-col span="13" offset="2" class="login-img-box">
      <img src="static/img/sale.jpg" alt="">
    </i-col>
    <i-col span="7" class="login-box">
      <div class="login-container">
        <div class="login-header">
          <p>欢迎登录</p>
        </div>
        <div class="form-box">

          <Form>
            <div class="form-elem">
              <span>账号：</span>
              <i-input v-model="signinName" type="text" placeholder="输入用户名">
                <Icon type="person" slot="prepend"></Icon>
              </i-input>
            </div>

            <div class="form-elem">
              <span>密码：</span>
              <i-input v-model="signinPwd" type="password" placeholder="输入密码">
                <Icon type="ios-locked-outline" slot="prepend"> </Icon>
              </i-input>
            </div>
            <div class="form-elem">
              <button   v-on:click.prevent="signin">登录</button>
            </div>
          </Form>
        </div>
      </div>
    </i-col>



  </Row>
</div>
  </div>
</template>

<script>
import axios from "_axios@0.24.0@axios";
import { mapMutations, mapActions } from 'vuex';
import Header from '@/components/header/Header';
export default {
  name:'Login',
  components: {
    Header
  },
  data: function () {
    return {
      signinName: '',
      signinPwd: '',
      loginData:''

  }
  },
  methods: {
    ...mapMutations(['SET_USER_LOGIN_INFO']),

    signin() {
      const that = this;
      axios
        .post('https://wiwilz.cn/api/token/', {
          username: this.signinName,
          password: this.signinPwd,
        })
        .then(function (response) {
          // console.log(that.signinName);
            //let blob = response.config.url;
           // window.open(blob);
            const storage = localStorage;
            //const expiredTime =  (new Date()).getTime();
            const expiredTime = (new Date()).getTime(response.headers.date) + 60000;
            // 设置 localStorage
            storage.setItem('access.lenove', response.data.access);
            storage.setItem('refresh.lenove', response.data.refresh);
            storage.setItem('expiredTime.lenove', expiredTime);
            storage.setItem('username.lenove', that.signinName);
            storage.setItem('islogin.lenove', true);
            // 路由跳转
            // 登录成功后回到博客首页
            that.$router.push({name: 'Home'});
          }
        )
          // 读者自行补充错误处理
        .catch(() => {
          // alert(error.message);
          alert('用户名或密码错误！');
          that.$Message.message('用户名或密码错误！');
          // Handling Error here...
          // https://github.com/axios/axios#handling-errors
        });
    },

  }
}

</script>

<style scoped>
.container {
  margin-top: 30px;
  height: 485px;
  background-color: #fff;
}
.login-img-box {
  height: 485px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-img-box>img {
  width: 68%;
}
.login-box {
  height: 485px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-container {
  width: 80%;
  height: 280px;
  border: #ED3F14 solid 1px;
  align-items: center;
}
.login-header {
  height: 50px;
  font-size: 20px;
  text-align: center;
  line-height: 50px;
  letter-spacing: 5px;
  color: #fff;
  background-color: #ED3F14;
}
.form-box {
  width: 80%;
  margin: 30px auto;
}
/*#grid {*/
/*  display: grid;*/
/*  grid-template-columns: 1fr 1fr;*/
/*}*/
/*#signin {*/
/*  text-align: center;*/
/*}*/
.form-elem {
  padding: 10px;
}
input {
  height: 25px;
  padding-left: 10px;
}
button {
  text-align: center;
  padding-left: 10px;
  height: 35px;
  cursor: pointer;
  border: none;
  outline: none;
  background: #ED3F14;
  color: whitesmoke;
  border-radius: 5px;
  width: 200px;
}
</style>
